<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  title: String,
  modelValue: Boolean,
  needFooter: {
    type: Boolean,
    default: true
  }
})
const isShow = ref(false)
const emit = defineEmits(['update:modelValue'])
// 监听外部变化
watch(() => props.modelValue, (newVal) => {
  isShow.value = newVal
})
// 监听内部变化并通知父组件
watch(isShow, (newVal) => {
  emit('update:modelValue', newVal)
})
</script>

<template>
  <el-dialog v-model="isShow" :title=title width="500" class="dialog">
    <slot></slot>
    <template #footer v-if="needFooter">
      <div class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="isShow = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>

<style>
.el-dialog__body {
  min-height: 200px;
}
</style>
